<template>
	<view>
		<zero-loading type="circle" v-if="loading"></zero-loading>
		<view class="title "></view>

		<scroll-view scroll-y="true" class="scroll-Y" :style='{ height: scrollHeight }'>
			<view class="bg-farm margin-sm padding-sm " hover-class="opcity" hover-stay-time="150"
				v-for="(item, idx) in farms" :key="idx" @tap="onFarmClick(item)">
				<!-- <view class="padding-top-sm padding-left padding-bottom-xl  align-center text-center shadow border ">
					<view class="fl"><text class="cuIcon-locationfill text-icon-size text-olive "></text></view>
					<view class="fl"><text class="text-white text-md "> {{item.farmname}}</text></view>

					<view class="fr margin-right-lg " @tap.stop="onFarmAlarm(item)">
						<view v-if="item.detail.alarm_device_num>0" class="cu-tag round bg-red sm">
							{{item.detail.alarm_device_num}}
						</view>
					</view>
				</view> -->
				
				<view class="padding-sm flex align-center">
					<view class="flex-treble text-left">
						<text class="cuIcon-locationfill  text-olive "></text>
						<text
							class="text-white text-md padding-left-xs">{{item.farmname}}</text>
				
					</view>
					<view class="flex-sub text-right" >
						<view v-if="item.detail.alarm_device_num>0" class="cu-tag round bg-red sm" @tap.stop="onFarmAlarm(item)">
							{{item.detail.alarm_device_num}}
						</view>
					</view>
				</view>
				
				<view class="  align-center text-center  border">
					<view class="flex padding-xs">
						<view class="flex-sub padding-xs split">
							<view class="">
								<view class="text-sm text-gray">采食量达标率</view>
								<view class="margin-top-sm text-xl text-green">{{item.detail.today_feed}} <text
										class="text-gray padding-left-xs text-xs">吨</text></view>
							</view>
						</view>
						<view class="flex-sub padding-xs">
							<view class="">
								<view class="text-sm text-gray">在线/总设备</view>
								<view :class="item.detail.offline_num>0?'text-orange':'text-green'" class="margin-top-sm text-xl ">{{item.detail.online_num}}/{{item.detail.online_num+item.detail.offline_num}}</view>
							</view>
						</view>
					</view>

					
				</view>

				<view class="padding-xs">
					<view class="flex padding-bottom-sm padding-left-sm padding-right-sm">
						<view class=" cu-progress radius  active">
							<view :class="item.detail.per>95?'bg-green':'bg-orange'" class="" :style="[{ width: item.detail.per+'%' }]" >{{item.detail.per}}%</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>

	
</template>
<script>
	import * as api from 'common/api.js';
	import {
		API_HEAD
	} from '../../../common/api';
	export default {
		data() {
			return {
				loading:false,
				scrollHeight: 0,
				farms: [],
			}
		},
		onReady() {
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					//console.info("窗口高度:", resu.windowHeight)
					const query = uni.createSelectorQuery()
					query.select('.title').boundingClientRect()
					query.exec(res => {

						//console.info("顶部下拉区域:", res[0])
						this.scrollHeight = resu.windowHeight - res[0].height - 10 + 'px';
						//console.log('剩余高度', this.scrollHeight);
					})
				}
			})
		},
		onShow: function() {
			console.info("show feed")
			if(this.farms.length==0){
				this.loadFarms()
			}
			
			uni.preloadPage({url: "/pages/tabbar/home/home"});
			uni.preloadPage({url: "/pages/tabbar/my/my"});
		},
		created() {

		},
		onLoad() {
			var that = this
			console.info("load feed")
			//this.loadFarms()
			uni.$on('login', function (data) {
				console.log('login event',data)
				that.loadFarms()
			})
		},
		onNavigationBarButtonTap(e) {
			this.loadFarms()
		},
		methods: {
			loadFarms() {
				var that = this
				var token = getApp().getToken()

				that.loading = true
				api.myRequest({
					url: '/Api/Farm/List',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {
						that.farms = res.data
						for (var i = 0; i < that.farms.length; i++) {
							that.farms[i].detail = {
								"alarm_device_num": 0,
								"today_feed": 0,
								"today_water": 0,
								"yestoday_feed": 0,
								"yestoday_water": 0,
								"max_feed":0,
								"per":0,
								"offline_num": 0,
								"online_num": 0,
								"num_stop": 0,
								"house_num": 0,
								"gw_num": 0,
								"gw_alive_num": 0,
							}

							that.loadFarmInfo(token, that.farms[i].id)
						}
					} else {
						uni.showModal({
							title: "系统异常",
							content: res.msg,
							showCancel: false,
							confirmText: "确定"
						})
					}
				}).catch(err => {
					that.loading = false
					console.log(err)
				})
			},

			loadFarmInfo(token, id) {
				var that = this
				api.myRequest({
					url: '/Api/Farm/SummaryInfo',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						id: id
					},
				}, false).then(res => {
					if (res.code >= 0) {
						for (var i = 0; i < that.farms.length; i++) {
							if (that.farms[i].id == id) {
								that.farms[i].detail = res.data
								//计算百分比
								if(that.farms[i].detail.today_feed){
									that.farms[i].detail.today_feed =parseFloat((that.farms[i].detail.today_feed/1000).toFixed(3))
								}else{
									that.farms[i].detail.today_feed = 0
								}
								
								if(that.farms[i].detail.max_feed){
									that.farms[i].detail.max_feed =parseFloat((that.farms[i].detail.max_feed/1000).toFixed(3))
								}else{
									that.farms[i].detail.max_feed = 0
								}
								if(that.farms[i].detail.online_num){
								
								}else{
									that.farms[i].detail.online_num = 0
								}
								if(that.farms[i].detail.offline_num){
								
								}else{
									that.farms[i].detail.offline_num = 0
								}
								
								//that.farms[i].detail.per = parseFloat(parseFloat((that.farms[i].detail.today_feed/that.farms[i].detail.max_feed)*100).toFixed(1))
								
								that.farms[i].detail.per = parseFloat(parseFloat((that.farms[i].detail.online_num/(that.farms[i].detail.offline_num+that.farms[i].detail.online_num)*100).toFixed(1)))
								break
							}
						}
						that.$forceUpdate()
					} else {

					}
				}).catch(err => {
					console.log(err)
				})
			},

			onFarmClick(item) {
				console.info(JSON.stringify(item))
				uni.navigateTo({
					url: "/pages/farm/farm?farmname=" + item.farmname + "&id=" + item.id
				})
			},
			onFarmAlarm(item) {
				console.info("onFarmAlarm")
				uni.navigateTo({
					url: "/pages/alarm/alarm?farmname=" + item.farmname + "&farmid=" + item.id
				})
			}
		}
	}
</script>

<style>
	.bg-farm {
		min-height: 300rpx;
		border-radius: 10rpx;
		/* opacity: 0.9; */
		/* background: url("https://www.hozenn.com/iot/img/house.png") 80% 50% / 40% no-repeat linear-gradient(to top, rgba(255, 255, 255, 0.95)); */
		/* background-image:linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),url('https://www.hozenn.com/iot/img/house.png'); */
		background-repeat: no-repeat;
		background-size: 20%;
		background-position: 55% 50%;
		/* background-color: rgba(200, 200, 200, 0.4); */
		background: linear-gradient(135deg, #3c7cff 30%, #67d3ce 100%) !important;
	}
	.opcity{
		opacity: 0.6;
	}

	.padding-xxs {
		padding: 2px;
	}

	.title {
		position: relative;
		font-weight: 700;
		font-size: 24px;
		line-height: 44px;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 5rpx;
		/* background-color: tra; */
	}

	.split {
		border-right: 2px solid #f5f3f330;
	}
</style>